<template>
    <Header title="地址管理" />
    <van-address-list :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
</template>
<script>
import { reactive,toRefs,onMounted } from 'vue';
import Header from '../../components/Header'
import {useStore} from 'vuex';
import {useRouter} from 'vue-router'
export default {
    components: {
        Header
    },
    setup() {
        const store=useStore()
        const router=useRouter()
        const onAdd = () => {
            router.push({
                path:'/addressedit',
                query:{
                    type:'add'
                }
            })
        };
        const onEdit = (item) => {
            router.push({
                path:'/addressedit',
                query:{
                    id:item.id,
                    type:'edit'
                }
            })
        };
        const data=reactive({
            list:[],
        })
        const init=()=>{
            data.list=store.state.userAddress.map(item=>{
                return {
                id:item.id,
                name:item.name,
                tel:item.tel,
                address:`${item.province}${item.city}${item.county}${item.addressDetail}`,
                isDefault:item.isDefault
                }
            })
        }
        onMounted(()=>{
            init();

        })
        return {
            ...toRefs(data),
            onAdd,
            onEdit,
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
/deep/ .van-radio__icon {
  display: none;
}
</style>